<template>
   <view>
        <view>
            <view class="tower-swiper" @touchmove="TowerMove" @touchstart="TowerStart" @touchend="TowerEnd">
                <view class="tower-item"  :style="[{'--index': item.zIndex,'--left':item.mLeft}]" :data-direction="direction" :class="item.zIndex ==1 ? 'none':''" v-for="(item,index) in swiperList" :key="index"  >
                    <view class="swiper-item">
                        <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
                        <!-- <video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video> -->
                    </view>
                </view>
            </view>
        </view>
	</view>
</template>
<script lang="ts" setup>
import {ref, reactive, onMounted} from "vue"

const towerStart = ref(0)
const direction = ref("left")
const swiperList = reactive<any>([
    {id: 0,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'},
    {id: 1,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',}, 
    {id: 2,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'}, 
    {id: 3,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'}, 
    {id: 4,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'}, 
    {id: 5,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'}, 
    {id: 6,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'}
])


// 初始化towerSwiper
const TowerSwiper = () => {
    const list = swiperList  
    const halfLenght = Math.floor(list.length / 2);
    for (let i = 0; i < list.length; i++) {
        list[i].zIndex = halfLenght + 1 - Math.abs(i -  halfLenght)  // ( 1, 2, 3, 4, 3, 2, 1)
        list[i].mLeft = i - halfLenght //                               (-3,-2,-1, 0, 1, 2, 3)
    }
}

// towerSwiper触摸开始
const TowerStart = (event: any) => {
    // console.log(event)
    towerStart.value = event.touches[0].pageX
}

// towerSwiper计算方向
const TowerMove = (event: any) => {
    // console.log(event)
    direction.value = event.touches[0].pageX - towerStart.value  > 0 ? 'right' : 'left'
}

// towerSwiper计算滚动
const TowerEnd  = (event: any) => {
    let dir = direction.value
    let list = swiperList;
    if( dir == "right" ){
        let mLeft = list[0].mLeft;
        let zIndex = list[0].zIndex;
        for (let i = 1; i < swiperList.length; i++) {
            swiperList[i - 1].mLeft = swiperList[i].mLeft
            swiperList[i - 1].zIndex = swiperList[i].zIndex
        }
        swiperList[list.length - 1].mLeft = mLeft;
        swiperList[list.length - 1].zIndex = zIndex;
    }else{
        let mLeft = list[list.length - 1].mLeft;
        let zIndex = list[list.length - 1].zIndex;
        for (let i = swiperList.length - 1; i > 0; i--) {
            swiperList[i].mLeft = swiperList[i - 1].mLeft
            swiperList[i].zIndex = swiperList[i - 1].zIndex
        }
        swiperList[0].mLeft = mLeft;
        swiperList[0].zIndex = zIndex;
    }
    direction.value = ""
}


onMounted(()=>{
    TowerSwiper()
})

</script>
<style lang="scss" scoped>
.tower-swiper .tower-item {
    transform: scale(calc(0.5 + var(--index) / 10));
    margin-left: calc(var(--left) * 100upx - 150upx);
    z-index: var(--index);
}

</style>